@mixin h1 {
  width:100%;
  font-size: 24pt;
}

@mixin p {
  width:100%;
  font-size: 12pt;
}
@mixin border_box {
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box; /* Safari */
}
@mixin box {
  height: 590px;
  @include border_box;
}

@mixin a {
  text-decoration: none;
  line-height: 30px;
  &:link {
    font-size: 20px;
    color: #4169e1;
    font-weight: bold;
  }
  &:hover {
    color: red;
    text-decoration: underline;
  }
}

@mixin button {
  background-color: #fff;
  border: 1px solid transparent;
  position: absolute;
  top: 0px;
  right: 0px;
  &:hover {
    font-size: 14px;
    font-weight: bold;
  }
}


.active{
   background-color: #aaa;
   color: #eee;
}

body{
  padding:0;
  margin:0;
}

.container {
  display: flex;
  display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
  display: -moz-flex; /* Firefox 18+ */
  flex-wrap:wrap;
  -webkit-flex-wrap:wrap;
  -moz-flex-wrap:wrap;

  border: 5px double #aaa;
  margin:0 auto;
  width: 1000px;
  height: 800px;
  > header {
    width: 100%;
    padding:15px;
    // border-radius: 20px 20px 0 0;
    background-color: #eee;
    border-bottom: 5px solid #fff;
    @include border_box;
    > h1 {
      @include h1;
    }
    > p {
      width:100%;
      font-size: 12pt;
    }
  }
  > .left {
    @include box;
    border-right: 5px solid #eee;
    width: 200px;
    > .album {
      box-sizing: border-box;
      width: 96%;
      height: 30px;
      border: 1px solid silver;
      margin: 0px 2%;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      position: relative;

      >img {
        width: 20px;
        height: 16px;
        vertical-align: middle;
      }
      > a {
        @include a;
        text-align: left;
        vertical-align: middle;
      }
      > button {
        @include button;
        top: 5px;
      }
    }
  }
  > .main {
    @include box;
    width: 800px;
    > .button {
      display: inline-block;
      > .buct {
        width: 120px;
        padding: 3px double silver;
        background-color: #aaa;
        font-size: 14pt;
        color: white;
        text-align: center;
        &:hover {
          background-color: #888;
        }
      }
      > input {
        font-size: 14pt;
      }
    }

    > .images {
      width: 100%;
      height: 500px;
      display: flex;
      flex-wrap: wrap;
      align-content: space-around;
      // overflow: hidden;
      > div {
        &.show {
          display: flex;
          flex-wrap: wrap;
          overflow: hidden;
        }
        display: none;

        > div {
          &.visible {
            display: block;
          }
          display: none;
          position: relative;
          width: 250px;
          height: 200px;
          border: 2px double #ccc;
          margin: 150px 5px;
          > button {
            @include button;
          }
          > img {
            width: 240px;
            height: 190px;
            margin: 5px;
          }
        }
      }
    }
    > .page_arr {
      width: 100%;
      height: 30px;
      text-align: center;
      }
  }
  >footer{
    width: 100%;
    padding:15px;
    border-top: 5px solid #fff;
    // border-radius: 0 0 20px 20px;
    background-color: #eee;
    @include border_box;

    > p {
      margin:3px;
      font-size:6pt;
      color: #666;
      text-align: center;
    }
  }
}
